<template>
  <div>
    <admin-container>
      <template v-slot:content>
        <table-plugin
            :page="page"
            :config="config"
            :search-operate="searchOperate"
            :part-operate="partOperate"
            @part="partOperateActuator"
            @search="searchOperateActuator"
        />
      </template>
    </admin-container>
    <el-drawer
        :title="drawer.title"
        :visible.sync="drawer.flag"
        size="35%"
        @close="$refs['scoreRuleRef'].resetFields()"
    >
      <div class="drawer-main">
        <el-form :model="scoreRule" ref="scoreRuleRef" :rules="rules">
          <el-form-item label="奖励项">
            <el-input v-model="scoreRule.rewardItem" disabled/>
          </el-form-item>
          <el-form-item label="奖励项描述">
            <el-input v-model="scoreRule.rewardDesc" disabled/>
          </el-form-item>
          <el-form-item label="奖励项值" prop="rewardValue">
            <el-input v-model="scoreRule.rewardValue" placeholder="请输入奖励值"/>
          </el-form-item>
        </el-form>
        <div class="drawer-btn">
          <el-button type="primary" size="medium" @click="updateReward">确定变更</el-button>
          <el-button size="medium" @click="drawer.flag = false">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import AdminContainer from '@/components/plugs/admin-container/AdminContainer.vue'
import TablePlugin from '@/components/plugs/table-plugin/TablePlugin.vue'
import {post, get} from "@/utils/api";

export default {
  data() {
    let checkrewardValue2Number = (rule, value, callback) => {
      let check = /^([1-9]\d{0,2}|1000)$/;
      if (!check.test(value)) {
        return callback(new Error('只能输入1~1000的正整数'));
      }
      return callback();
    }
    return {
      drawer: {
        flag: false,
        title: ''
      },
      scoreRule: {},
      rules: {
        rewardValue: [
          {required: true, message: '奖励项奖励值不能为空', trigger: 'blur'},
          {validator: checkrewardValue2Number, trigger: 'blur'}
        ]
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
        records: []
      },
      config: {
        columns: [
          {
            fixed: false,
            prop: 'rewardItem',
            label: '积分奖励项标识',
            width: '200',
          },
          {
            fixed: false,
            prop: 'rewardValue',
            label: '奖励积分值',
            width: '150',
          },
          {
            fixed: false,
            prop: 'rewardDesc',
            label: '积分奖励项描述',
            width: '100',
          }
        ]
      },
      partOperate: [
        {type: 'change', text: '变更奖励项', level: 'text', color: ''}
      ],
      searchOperate: {
        entity: {},
        condition: [
          {label: '积分奖励项标识', prompt: '请输入积分奖励项标识', type: 'input', width: '200px', name: 'rewardItem'},
          {
            label: '积分奖励项',
            prompt: '请输入积分奖励项描述(模糊查询)',
            type: 'input',
            width: '300px',
            name: 'rewardDesc'
          }

        ]
      }


    }
  },
  methods: {
    partOperateActuator(index, row, operate) {
      switch (operate.type) {
        case 'change':
          this.drawer.flag = true;
          this.drawer.title = '变更奖励项奖励积分'
          this.scoreRule = row;
          break;
      }
    },
    // 搜索
    searchOperateActuator() {
      this.getPage();
    },
    // 获取所有的积分规则项目
    getPage() {
      const promise = get({
        url: '/base-score/back/score/rule/page',
        params: {
          current: this.page.current,
          size: this.page.size,
          rewardItem: this.searchOperate.entity.rewardItem,
          rewardDesc: this.searchOperate.entity.rewardDesc
        }
      });
      promise.then(res => {
        if (res && res.code === 200) {
          this.page = res.data;
        }
      })
    },
    // 更新积分表单项目
    updateReward() {
      this.$refs['scoreRuleRef'].validate(valid => {
        if (valid) {
          const promise = post({
            url: '/base-score/back/score/rule/update',
            data: {
              rewardItem: this.scoreRule.rewardItem,
              rewardValue: this.scoreRule.rewardValue
            }
          });
          promise.then(res => {
            if (res && res.code === 200) {
              this.$message.success(res.message);
              this.getPage();
              this.drawer.flag = false;
              return;
            }
            this.$message.error(res.message);
          })
          return;
        }
        this.$message.error('表单数据验证不通过,请检查后重试~')
      })


    }


  },
  components: {
    AdminContainer,
    TablePlugin

  },
  mounted() {
    this.getPage();
  }
}
</script>

<style scoped>

.drawer-main {
  padding-left: 20px;
  padding-right: 20px;
  position: relative;

}

.drawer-btn {
  position: fixed;
  bottom: 0;
  padding-bottom: 10px;
}
</style>